import React from "react";
import { Card, Tabs, List, Tag, Button, Space } from "antd";
import {
  ClockCircleOutlined,
  FileTextOutlined,
  CheckCircleOutlined,
  CloseCircleOutlined,
} from "@ant-design/icons";
import styled from "styled-components";

const StyledCard = styled(Card)`
  margin-bottom: 24px;
  .ant-card-head-title {
    font-weight: bold;
  }
`;

const StudentExams: React.FC = () => {
  // 模拟数据
  const upcomingExams = [
    {
      id: "1",
      title: "数据结构期中考试",
      course: "数据结构",
      time: "2024-04-20 14:00",
      duration: "120分钟",
      location: "教学楼A-301",
      type: "闭卷",
      status: "未开始",
    },
    {
      id: "2",
      title: "计算机网络实验考核",
      course: "计算机网络",
      time: "2024-04-22 10:00",
      duration: "90分钟",
      location: "实验楼B-205",
      type: "上机考试",
      status: "未开始",
    },
  ];

  const completedExams = [
    {
      id: "3",
      title: "操作系统理论考试",
      course: "操作系统",
      time: "2024-03-15 14:00",
      score: 85,
      status: "已完成",
    },
    {
      id: "4",
      title: "Java程序设计实验",
      course: "Java程序设计",
      time: "2024-03-10 10:00",
      score: 92,
      status: "已完成",
    },
  ];

  const items = [
    {
      key: "upcoming",
      label: "即将考试",
      children: (
        <List
          dataSource={upcomingExams}
          renderItem={(exam) => (
            <List.Item
              actions={[
                <Button type="primary">进入考试</Button>,
                <Button>查看详情</Button>,
              ]}
            >
              <List.Item.Meta
                title={
                  <Space>
                    {exam.title}
                    <Tag color="blue">{exam.type}</Tag>
                  </Space>
                }
                description={
                  <Space direction="vertical">
                    <div>
                      <Tag color="cyan">{exam.course}</Tag>
                    </div>
                    <div>
                      <ClockCircleOutlined /> 考试时间：{exam.time}
                    </div>
                    <div>
                      <FileTextOutlined /> 考试时长：{exam.duration}
                    </div>
                    <div>
                      <ClockCircleOutlined /> 考试地点：{exam.location}
                    </div>
                  </Space>
                }
              />
            </List.Item>
          )}
        />
      ),
    },
    {
      key: "completed",
      label: "已完成考试",
      children: (
        <List
          dataSource={completedExams}
          renderItem={(exam) => (
            <List.Item actions={[<Button>查看详情</Button>]}>
              <List.Item.Meta
                title={
                  <Space>
                    {exam.title}
                    <Tag color="success">
                      <CheckCircleOutlined /> 已完成
                    </Tag>
                  </Space>
                }
                description={
                  <Space direction="vertical">
                    <div>
                      <Tag color="cyan">{exam.course}</Tag>
                    </div>
                    <div>
                      <ClockCircleOutlined /> 考试时间：{exam.time}
                    </div>
                    <div>
                      <FileTextOutlined /> 考试成绩：{exam.score}分
                    </div>
                  </Space>
                }
              />
            </List.Item>
          )}
        />
      ),
    },
  ];

  return (
    <div style={{ padding: "24px" }}>
      <StyledCard title="考试中心">
        <Tabs items={items} />
      </StyledCard>
    </div>
  );
};

export default StudentExams;
